import React from "react"
import clsx from "clsx"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"

type Props = {
  title: string
  description: string
  icon: React.ReactNode
  iconBackground: string
  buttonText?: string
}

const ButtonCard = (props: Props) => {
  const { title, description, icon, iconBackground, buttonText } = props

  return (
    <Card className="border-none shadow-lg hover:shadow-xl transition-shadow dark:bg-gray-700">
      <CardContent className="p-0">
        <div className={clsx("h-48 bg-gradient-to-r flex items-center justify-center", iconBackground)}>{icon}</div>
        <div className="p-6">
          <h3 className="text-xl font-semibold mb-2 text-text-primary">{title}</h3>
          <p className="text-text-secondary mb-4">{description}</p>
          <Button variant="outline" className="w-full">
            {buttonText ?? "查看详情"}
          </Button>
        </div>
      </CardContent>
    </Card>
  )
}

export default ButtonCard
